import React, { Component } from 'react';
import { Link,withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import './index.scss';
import Folder from './folder1.png';
import View from './component/view';
import DBApplication from './component/dbApplication';
import FileApplication from './component/fileApplication';
import ApiApplication from './component/apiApplication';

import { Layout, Tree,Button,Form,Table,Input,Checkbox,Divider,Spin,InputNumber,Modal,Pagination,message} from 'antd';

const { Content,Sider,Header } = Layout;
@withRouter
class Application extends Component{
   constructor() {
    super()
        this.state={
          total:20,
          page:1,
          totalPage:2,
          name:'',
          number:'',
          viewVisible:false,
          applicationVisible:false,
          resourceFormat:''
        }
      }
  // state={
  //   total:20,
  //   page:1,
  //   totalPage:2,
  //   name:'',
  //   number:'',
  //   viewVisible:false,
  //   applicationVisible:false,
  //   resourceFormat:''
  // }
  searchForm=React.createRef();

  search=()=>{
    this.searchForm.current.validateFields().then(values=>{
      if(values.name||values.dataItem){
        console.log(values);
      }else{
        message.info('请输入资源名称/数据项进行搜索！');
      }
    })
  }

  resetForm=()=>{
    this.searchForm.current.resetFields();
  }

  changePage=(page)=>{
      this.setState({
          page
      })
  }
  view=(record)=>{
    this.setState({
      viewVisible:true
    })
  }

  application=(record)=>{
    this.setState({
      applicationVisible:true,
      resourceFormat:record.resourceFormat
    })
    console.log(record.resourceFormat)
  }

  handleCancel=()=>{
    this.setState({
      viewVisible:false,
      applicationVisible:false
    })
  }

  resourceApplication=()=>{
    console.log(this.format);
    this.format.formRef.current.validateFields().then(values=>{
      console.log(values);
      this.setState({
        applicationVisible:false
      })
    })
  }
  componentDidMount(){
    // fetch('./mock/orders.json').then(res => {
    //     if(res.ok){
    //         res.json().then(data => {
    //           console.log(data)
    //             // this.setState({
    //             //     data
    //             // })
    //         })
    //     }
    // })
}

  //点击树切换右侧列表

  replaceResourceList=(record)=>{
    console.log(record)
    this.props.history.push('/resourceService/application');
    // this.setState({
    //   applicationVisible:true,
    //   resourceFormat:record.resourceFormat
    // })
  }
  render(){
    const {total,page,totalPage,name,number,viewVisible,applicationVisible,resourceFormat}=this.state;
    const data=[
      {
        title: '基础信息资源',
        key: '0-0',
        icon:<img src={Folder}/>,
        children: [
          {
            title: '国家人口基础信息',
            key: '0-0-0',
            children: [
              {
                title: '国家人口基础信息1111',
                key: '0-0-0-0',
              },
              {
                title: '法人单位基础信息',
                key: '0-0-1-1',
              },
              {
                title: '电子还原信息',
                key: '0-0-2-2',
              },
            ],
          },
          {
            title: '法人单位基础信息',
            key: '0-0-1',
          },
          {
            title: '电子还原信息',
            key: '0-0-2',
          },
        ],
      },
      {
        title: '主题信息资源',
        key: '1-0',
        icon:<img src={Folder}/>,
        children: [
          {
            title: '公共服务事项',
            key: '1-0-0',
          },
          {
            title: '全民社会保障',
            key: '1-0-1',
          },
          {
            title: '市场价格监督',
            key: '1-0-2',
          },
        ],
      },
    ]
    const columns=[
      {
        title:'序号',
        key:'index',
        dataIndex:'index',
        render:(text, record, index)=>{
          return <span>{index+1}</span>
        }
      },
      {
        title:'资源代码',
        key:'resourceCode',
        dataIndex:'resourceCode',
      },
      {
        title:'资源名称',
        key:'resourceName',
        dataIndex:'resourceName',
      },
      {
        title:'资源提供方',
        key:'resourceProvider',
        dataIndex:'resourceProvider',
      },
      {
        title:'共享类型',
        key:'shareType',
        dataIndex:'shareType',
        render:(text,record)=>{
        return <span style={{}}>{text}</span>
        }
      },
      {
        title:'资源格式',
        key:'resourceFormat',
        dataIndex:'resourceFormat',
        render:(text,record)=>{
        return <span style={{}}>{text}</span>
        }
      },
      {
        title:'发布时间',
        key:'releaseTime',
        dataIndex:'releaseTime',
      },
      {
        title:'操作',
        key:'action',
        dataIndex:'action',
        render:(text,record)=>{
          return <div>
            <span className='action' onClick={()=>this.view(record)}>查看</span>
            {
                record.shareType!=='不予共享'?<span className='action' onClick={()=>this.application(record)}>{record.shareType==='有条件共享'?'资源申请':'资源订阅'}</span>:''
            }
          </div>
        }
      },
    ]
    const dataSource=[
      {
        index:1,
        resourceCode:'00123',
        resourceProvider:'市公安局',
        resourceName:'街道信息',
        shareType:'有条件共享',
        releaseTime:'2019-12-2 05:05:05',
        resourceFormat:'数据库'
      },
      {
        index:2,
        resourceCode:'00123',
        resourceProvider:'市公安局',
        resourceName:'街道信息',
        shareType:'无条件共享',
        releaseTime:'2019-12-2 05:05:05',
        resourceFormat:'电子文件'
      },
      {
        index:3,
        resourceCode:'00123',
        resourceProvider:'市公安局',
        resourceName:'街道信息',
        shareType:'无条件共享',
        releaseTime:'2019-12-2 05:05:05',
        resourceFormat:'接口'
      },
      {
        index:4,
        resourceCode:'00123',
        resourceProvider:'市公安局',
        resourceName:'街道信息',
        shareType:'不予共享',
        releaseTime:'2019-12-2 05:05:05',
        resourceFormat:'数据库'
      },
      
    ]

    const titleStyle={
      color:'rgb(0,126,220)',height:54.6,width:'100%',backgroundColor:'#e4e4e4',position:'absolute',left:0,top:0,display:'flex',
      alignItems:'center',paddingLeft:24,fontWeight:'bold',zIndex:2
    } 
    const footerStyle={
      backgroundColor:'#e6eef5',width:'100%',height:53,position:'absolute',left:0,bottom:0,
      display:'flex',alignItems:'center',justifyContent:'center'
    }
    return (
      <Content style={{position:"relative",left:-24}} className='out-content' >
        <Layout className='layout'>
          <Sider className='sider'>
            <Tree
              showLine={true}
              showIcon={true}
              treeData={data}
              onSelect ={this.replaceResourceList}
            />
          </Sider>
          <Layout className='rightLayout'>
            <Header className='right-header'>
              <p className='title'>资源列表</p>
            </Header>
            <Content className='content'>
              <div className='form-inline'>
                <Form layout='inline' ref={this.searchForm}>
                  <Form.Item label='资源名称' colon={false} name='name'>
                    <Input />
                  </Form.Item>
                  <Form.Item label='数据项' colon={false} name='dataItem'>
                    <Input />
                  </Form.Item>
                  <Form.Item>
                    <Button type='primary' onClick={this.search} >查询</Button>
                  </Form.Item>
                  <Form.Item>
                    <Button type='primary' onClick={this.resetForm}>重置</Button>
                  </Form.Item>
                </Form>
              </div>
              <div className='table-box'>
                <Spin spinning={false}>
                  <Table
                    columns={columns}
                    dataSource={dataSource}
                    className='table'
                    pagination={false}
                  />
                  <Pagination current={page} pageSize={10} total={total} onChange={this.changePage} style={{position:'absolute',bottom:20,right:10}}/>
                  <div className='footer'>
                    显示<InputNumber min={1} max={totalPage} defaultValue={page} />项结果，共{total}项
                  </div>
                </Spin>
              </div>
            </Content> 
          </Layout>
        </Layout>
        <Modal
          title={<div style={titleStyle}>查看</div>}
          onCancel={this.handleCancel}
          visible={viewVisible}
          width={800}
          bodyStyle={{backgroundColor:'#f0f3f6',overflow:'auto',height:540}}
          footer={<div style={footerStyle}>
            <Button type='primary' style={{color:'white',borderRadius:5}} onClick={this.handleCancel}>确定</Button>
            {/* <Button style={{color:'#007cdb',borderRadius:5}} onClick={this.handleCancel}>取消</Button> */}
          </div>}
        >
          <View/>
        </Modal>
        <Modal
          title={<div style={titleStyle}>资源订阅</div>}
          onCancel={this.handleCancel}
          visible={applicationVisible}
          width={resourceFormat==='电子文件'?600:1000}
          bodyStyle={{backgroundColor:'#f0f3f6',overflow:'auto',height:540}}
          // footer={null}
          footer={<div style={footerStyle}>
            <Button type='primary' style={{color:'white',borderRadius:5}} onClick={this.resourceApplication}>资源订阅</Button>
            <Button style={{color:'#007cdb',borderRadius:5}} onClick={this.handleCancel}>取消</Button>
          </div>}
        >
          {
            resourceFormat==='数据库'?<DBApplication onRef={ref=>this.format=ref}/>:''
          }
          {
            resourceFormat==='电子文件'?<FileApplication onRef={ref=>this.format=ref}/>:''
          }
          {
            resourceFormat==='接口'?<ApiApplication onRef={ref=>this.format=ref}/>:''
          }
        </Modal>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => ({
  findByFuzzyName(dataName,name){
    
  }
})

export default connect(mapStateToProps, mapDispatchToProps)( Application)